<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="600" height="400"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Helper function to draw an arrow
        function drawArrow(ctx, fromx, fromy, tox, toy, arrowWidth = 5, color = 'black') {
            const headlen = 10; // length of head in pixels
            const dx = tox - fromx;
            const dy = toy - fromy;
            const angle = Math.atan2(dy, dx);

            ctx.save();
            ctx.strokeStyle = color;
            ctx.fillStyle = color;
            
            // Draw line
            ctx.beginPath();
            ctx.moveTo(fromx, fromy);
            ctx.lineTo(tox, toy);
            ctx.lineWidth = 2;
            ctx.stroke();

            // Draw arrowhead
            ctx.beginPath();
            ctx.moveTo(tox, toy);
            ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
            ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
            ctx.closePath();
            ctx.fill();
            ctx.restore();
        }

        // --- Main Drawing ---
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        const originX = 250;
        const originY = 200;

        // --- Draw Axes ---
        ctx.save();
        ctx.lineWidth = 2;
        ctx.setLineDash([6, 6]);
        ctx.strokeStyle = '#333';

        // X-axis
        ctx.beginPath();
        ctx.moveTo(50, originY);
        ctx.lineTo(550, originY);
        ctx.stroke();

        // Y-axis
        ctx.beginPath();
        ctx.moveTo(originX, 350);
        ctx.lineTo(originX, 50);
        ctx.stroke();
        
        ctx.restore();

        // Axis arrows and labels
        drawArrow(ctx, 550, originY, 560, originY);
        drawArrow(ctx, originX, 50, originX, 40);

        ctx.font = 'italic 20px Times New Roman';
        ctx.fillStyle = 'black';
        ctx.fillText('x', 570, originY + 8);
        ctx.fillText('y', originX + 10, 45);
        ctx.fillText('O', originX - 20, originY + 20);

        // --- Particle m1 ---
        const m1_x = 100;
        const m1_y = originY;

        // Particle dot
        ctx.beginPath();
        ctx.arc(m1_x, m1_y, 4, 0, 2 * Math.PI);
        ctx.fill();

        // Label m1
        ctx.font = 'italic 20px Times New Roman';
        ctx.fillText('m', m1_x - 30, m1_y - 10);
        ctx.font = 'italic 14px Times New Roman';
        ctx.fillText('1', m1_x - 17, m1_y - 5);
        
        // Velocity vector for m1
        drawArrow(ctx, 140, originY, 210, originY);
        ctx.font = 'italic 20px Times New Roman';
        ctx.fillText('u', 170, originY - 15);


        // --- Particle m2 ---
        const theta0_deg = 30;
        const theta0_rad = theta0_deg * Math.PI / 180;
        
        const m2_dist = 250;
        const m2_x = originX + m2_dist * Math.cos(theta0_rad);
        const m2_y = originY - m2_dist * Math.sin(theta0_rad);

        // Path of m2
        ctx.save();
        ctx.lineWidth = 2;
        ctx.setLineDash([6, 6]);
        ctx.strokeStyle = '#333';
        ctx.beginPath();
        ctx.moveTo(originX, originY);
        ctx.lineTo(m2_x, m2_y);
        ctx.stroke();
        ctx.restore();
        
        // Particle dot
        ctx.beginPath();
        ctx.arc(m2_x, m2_y, 4, 0, 2 * Math.PI);
        ctx.fill();

        // Label m2
        ctx.font = 'italic 20px Times New Roman';
        ctx.fillText('m', m2_x + 10, m2_y);
        ctx.font = 'italic 14px Times New Roman';
        ctx.fillText('2', m2_x + 23, m2_y + 5);

        // Velocity vector for m2
        const u2_start_dist = 180;
        const u2_end_dist = 110;
        const u2_start_x = originX + u2_start_dist * Math.cos(theta0_rad);
        const u2_start_y = originY - u2_start_dist * Math.sin(theta0_rad);
        const u2_end_x = originX + u2_end_dist * Math.cos(theta0_rad);
        const u2_end_y = originY - u2_end_dist * Math.sin(theta0_rad);
        drawArrow(ctx, u2_start_x, u2_start_y, u2_end_x, u2_end_y);
        
        // Label u for m2
        const u2_label_dist = 145;
        const u2_label_x = originX + u2_label_dist * Math.cos(theta0_rad);
        const u2_label_y = originY - u2_label_dist * Math.sin(theta0_rad);
        ctx.font = 'italic 20px Times New Roman';
        ctx.fillText('u', u2_label_x - 20, u2_label_y - 10);
        
        // --- Angle θ₀ and its symbol ---
        // Angle arc
        ctx.beginPath();
        ctx.lineWidth = 1;
        ctx.arc(originX, originY, 100, 0, -theta0_rad, true);
        ctx.stroke();

        // Stylized right-angle part
        const symbol_point_x = originX + 100 * Math.cos(theta0_rad/2.5);
        const symbol_point_y_on_axis = originY;
        const symbol_point_y_on_arc = originY - Math.sqrt(100*100 - (symbol_point_x - originX)**2);
        
        ctx.beginPath();
        ctx.moveTo(symbol_point_x, symbol_point_y_on_arc);
        ctx.lineTo(symbol_point_x, symbol_point_y_on_axis);
        ctx.lineTo(symbol_point_x + 15, symbol_point_y_on_axis);
        ctx.stroke();

        // Angle label θ₀
        const label_dist = 125;
        const label_angle = theta0_rad / 1.5;
        const label_x = originX + label_dist * Math.cos(label_angle);
        const label_y = originY - label_dist * Math.sin(label_angle);
        ctx.font = 'italic 20px Times New Roman';
        ctx.fillText('θ', label_x, label_y + 8);
        ctx.font = 'italic 14px Times New Roman';
        ctx.fillText('0', label_x + 10, label_y + 12);
        
        // --- Caption ---
        ctx.font = 'bold 20px Times New Roman';
        ctx.fillStyle = 'black';
        ctx.textAlign = 'center';
        ctx.fillText('Fig. 1.100.', canvas.width / 2, 380);

    </script>
</body>
</html>